//1.引入Vue
import Vue from "vue"

//2.引入Vuex
import Vuex from "vuex"

import axios from "axios"

//3.Vuex其实本质是Vue的一个插件,所以我们要让Vue使用Vuex这个插件
//Vuex给Vue原型对象上提供了很多方法
Vue.use(Vuex)


//(1)创建state对象 保存数据
const state = {
    count: 0,
    price: 688,
    movieList: []
}

//(2)创建mutations对象 里面是函数 用来修改state中的数据 !!!修改数据的唯一方法就是提交mutation
const mutations = {
    //第一个参数是当前state对象
    increament(state) {
        state.count++
    },

    //第二个参数是payload(载荷)用来接收commit的传参 希望是一个对象 可以接收多个参数
    decreament(state, {
        n
    }) {
        state.count += n
    },

    getMovieList(state, list) {
        state.movieList = list
    }

    /* //一条重要的原则 mutation必须是同步函数 异步的话工具无法追踪数据的变化
    waitincreament(state){
        setTimeout(() => {
            state.price += 100
        }, 2000);
    } */
}


//(3)创建Actions处理异步数据
/* 
  创建Actions
  Action 类似于 mutation，不同在于：
    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
*/
const actions = {
    //接收一个参数 参数中解构出commit 用来提交mutation
    //等2秒累加
    increamentWait({
        commit
    }) {
        setTimeout(() => {
            //不能再actions中操作数据
            //把数据交给mutations处理
            commit("increament")
        }, 1500);
    },

    //等2秒累加n
    increamentNWait({
        commit
    }, n) {
        setTimeout(() => {
            //不能再actions中操作数据
            //把数据交给mutations处理
            commit("decreament", n)
        }, 1500);
    },

    //请求数据
    async getmovieList({commit}) {
        const result = await axios.get(
            "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
        );

        //请求回数据后只能commit到state中
        commit("getMovieList" , result.data.data.list)
    }
}

//创建getters对象  类似计算属性 处理state中的数据
// 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数等等 需要计算，我们就用到了getters 类似于vue中的计算属性
// getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
const getters = {
    //因为数据是state派生出来的，所以getters中的函数接收一个参数是state
    myMovieList(state){
        return state.movieList.filter((item) => {
            return item.albumName.length < 7 && item.albumName.length > 3
        })
    },

    //需要传参 所以getters返回一个函数供组件调用并传参
    yourMovieList(state){
        return ({start , end}) => {
            //返回的函数的返回值就是处理过的想要的数据  =>   ["..." , "..." ...  "..."]
            return state.movieList.filter((item) => {
                return item.albumName.length <= end && item.albumName.length >= start
            })
        }
    }

}

//4.创建store对象(Vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
})